<head>
    <link href="../static/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <link href="../static/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="../static/jquery/2.1.4/jquery.min.js"></script>

    <script src="../static/layui/layui.all.js"></script>

    <link href="../static/layui/css/layui.css" rel="stylesheet">
</head>
<title>新菜单分页</title>
<div class="lay-box">
    <button class="layui-btn" onclick="gradeEdit()">
        <i class="layui-icon">&#xe608;</i> 新增
    </button>

    <span onclick="search()" class="btn btn-info" style="height: 38px;margin-left: 10px;font-size: 14px">查询</span>

    <table class="table table-border table-bordered table-hover table-bg table-sort" id="layTable"
           lay-filter="tableFilter">

    </table>
</div>

<style>
    .lay-box {
        padding: 8px 12px;
    }

    .layui-form-checkbox[lay-skin=primary] i {
        top: 5px;
    }
</style>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="save">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--请在下方写此页面业务相关的脚本-->
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{
           d.enable== 1 ? 'checked' : '' }}>
</script>

<script type="text/javascript">
    var startDate = "";
    var endDate = "";
    var searchKey = "";
    var tableIns;
    var ids = "";
    var form;
    layui.use('table', function () {
        tableIns = layui.table,
            form = layui.form;
        form.render();
        tableIns.render({
            elem: '#layTable'
            ,
            url: '/account/queryAll'
            ,
            method: 'POST'
            ,
            where: {}
            ,
            id: 'dataTableId'
            ,
            cols: [[
                {
                    field: 'id',
                    title: 'id',
                    width: 150,
                    align: 'center',
                    sort: true
                },
                {
                    field: 'phone',
                    title: 'phone',
                    width: 150,
                    align: 'center',
                    sort: true
                },
                {
                    field: 'address',
                    title: 'address',
                    width: 150,
                    align: 'center',
                    sort: true
                },
                {
                    field: 'name',
                    title: 'name',
                    width: 150,
                    align: 'center',
                    sort: true
                },

                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}

            ]]
            ,
            page: true
        });

        form.on('switch(sexDemo)', function (obj) {
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            if (obj.elem.checked) {
                commonenable(this.value, 1);
            } else {
                commonenable(this.value, 0);
            }

        });
        tableIns.on('checkbox(tableFilter)', function (obj) {
            var checkStatus = tableIns.checkStatus('dataTableId');
            var dataList = checkStatus.data;
            if (dataList != null && dataList.length > 0) {

                for (var i = 0; i < dataList.length; i++) {
                    ids += dataList[i].id + ",";
                }
            }
        });



        $("#multiDelete").click(function () {
            deleteId(ids)
        });

        tableIns.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/account/edit",
                        type: 'delete',
                        data: {"id": data.id},
                        async: false,
                        dataType: "json",
                        success: function (arg) {
                            if (arg) {
                                layer.msg(arg.message);
                                search();
                            } else {
                                layer.msg(arg.message);
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'save') {
                layer_show("修改", "/account/edit?id=" + data.id, "650", "650");
            }
        });
    });

    function search() {

        tableIns.reload('dataTableId', {
            where: {}
            , page: {}
        });
    }


    function gradeEdit() {
        layer_show("新增", "/account/edit", "650", "600");
    }

    function showmsg(msg) {
        layer.msg(msg)
    }

    function layer_show(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "404.html";
        }
        ;
        if (w == null || w == '') {
            w = 800;
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 15);
        }
        ;
        layer.open({
            type: 2,

            area: [w + 'px', h + 'px'],
            fix: false, //不固定
            maxmin: true,
            shade: 0.4,
            title: title,
            content: url,
            moveOut: true
        });

        function GetPercent(num, total) {
            /// <summary>
            /// 求百分比
            /// </summary>
            /// <param name="num">当前数</param>
            /// <param name="total">总数</param>
            num = parseFloat(num);
            total = parseFloat(total);
            if (isNaN(num) || isNaN(total)) {
                return "-";
            }
            return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00) + "%";
        }
    }

</script>
<!--/请在上方写此页面业务相关的脚本-->
